import { ref as h, openBlock as f, createElementBlock as S, createElementVNode as n, renderSlot as a, toDisplayString as l, withDirectives as y, withKeys as b, vModelText as m, pushScopeId as F, popScopeId as C } from "vue";
import "./Search.vue2.js";
import k from "../_virtual/_plugin-vue_export-helper.js";
const R = (e) => (F("data-v-b97744d7"), e = e(), C(), e), v = { class: "prefix" }, B = /* @__PURE__ */ R(() => /* @__PURE__ */ n("svg", {
  class: "icon",
  "aria-hidden": "true"
}, [
  /* @__PURE__ */ n("use", { "xlink:href": "#icon-sousuo" })
], -1)), z = ["placeholder"], P = {
  __name: "Search",
  props: {
    // 搜索框背景颜色
    backgroundColor: { type: String, default: "#fff" },
    // 搜索框宽度
    searchWidth: { type: String, default: "40rem" },
    // 搜索框高度
    searchHeight: { type: String, default: "2.5rem" },
    // 搜索框文字大小
    searchFontSize: { type: String, default: "0.9rem" },
    // 搜索框内边距
    searchPadding: { type: String, default: "0.2rem 0" },
    // 搜索框边框颜色
    searchBorderColor: { type: String, default: "#67c23a" },
    // 搜索框圆角
    searchBorderRadius: { type: String, default: "3rem" },
    // 搜索图标大小
    iconSize: { type: String, default: "1rem" },
    // 搜索图标外边距
    iconMargin: { type: String, default: "0 0.5rem 0 0.9rem" },
    // 搜索图标文字
    iconFont: { type: String, default: "" },
    // 搜索图标文字大小
    iconFontSize: { type: String, default: "0.9rem" },
    // 搜索图标文字右边框颜色
    iconFontBorderRightColor: { type: String, default: "#ccc" },
    // 搜索图标文字内右边距
    iconFontPaddingRight: { type: String, default: "0.5rem" },
    // 搜索图标文字外右边距
    iconFontMarginRight: { type: String, default: "0.3rem" },
    // 输入框背景颜色
    inputBackgroundColor: { type: String, default: "#fff" },
    // 输入框文字大小
    inputFontSize: { type: String, default: "0.9rem" },
    // 输入框 placeholder
    inputPlaceholder: { type: String, default: "请输入你想要的宝贝" },
    // 搜索按钮宽度
    btnWidth: { type: String, default: "4rem" },
    // 搜索按钮高度
    btnHeight: { type: String, default: "100%" },
    // 按钮圆角
    btnBorderRadius: { type: String, default: "2rem" },
    // 按钮颜色
    btnBackgroundColor: { type: String, default: "#67c23a" },
    // 按钮右边距
    btnMargin: { type: String, default: "0 0.2rem 0 0" },
    // 按钮文字
    btnFontContent: { type: String, default: "搜索" },
    // 按钮文字颜色
    btnFontColor: { type: String, default: "#fff" },
    // 按钮点击事件处理函数
    btnClickHandler: { type: Function, default: () => {
    } },
    // 回车按下事件处理函数
    enterPressHandler: { type: Function, default: () => {
    } },
    // 输入框聚焦事件处理函数
    inputFocusHandler: { type: Function, default: () => {
    } }
  },
  setup(e) {
    const t = e, c = {
      backgroundColor: t.backgroundColor,
      width: t.searchWidth,
      height: t.searchHeight,
      padding: t.searchPadding,
      border: `2px solid ${t.searchBorderColor}`,
      borderRadius: t.searchBorderRadius,
      fontSize: t.searchFontSize
    }, s = {
      fontSize: t.iconSize,
      margin: t.iconMargin
    }, u = {
      fontSize: t.iconFontSize,
      borderRight: `1px solid ${t.iconFontBorderRightColor}`,
      paddingRight: t.iconFontPaddingRight,
      marginRight: t.iconFontMarginRight
    }, g = {
      backgroundColor: t.inputBackgroundColor,
      fontSize: t.inputFontSize
    }, p = {
      width: t.btnWidth,
      height: t.btnHeight,
      borderRadius: t.btnBorderRadius,
      backgroundColor: t.btnBackgroundColor,
      margin: t.btnMargin,
      color: t.btnFontColor
    }, o = h("");
    return (i, r) => (f(), S("div", {
      class: "search-container",
      style: c
    }, [
      n("div", v, [
        n("div", {
          class: "icon",
          style: s
        }, [
          a(i.$slots, "searchPrefixIcon", {}, () => [
            B
          ], !0)
        ]),
        a(i.$slots, "searchPrefixFont", {}, () => [
          n("span", { style: u }, l(e.iconFont), 1)
        ], !0)
      ]),
      a(i.$slots, "input", {}, () => [
        y(n("input", {
          "onUpdate:modelValue": r[0] || (r[0] = (d) => o.value = d),
          type: "text",
          placeholder: e.inputPlaceholder,
          style: g,
          onKeydown: r[1] || (r[1] = b((d) => e.enterPressHandler(o.value), ["enter"]))
        }, null, 40, z), [
          [m, o.value]
        ])
      ], !0),
      a(i.$slots, "btn", {}, () => [
        n("button", {
          class: "search-btn",
          style: p,
          onClick: r[2] || (r[2] = (d) => e.btnClickHandler(o.value))
        }, l(e.btnFontContent), 1)
      ], !0)
    ]));
  }
}, I = /* @__PURE__ */ k(P, [["__scopeId", "data-v-b97744d7"]]);
export {
  I as default
};
